<!-- 导航菜单组件 -->
<template>
    <n-layout-sider :native-scrollbar="false" bordered collapse-mode="width" :collapsed-width="64" :width="270"
        :collapsed="toolStore.collapsed" show-trigger @collapse="toolStore.collapsed = true" @expand="toolStore.collapsed = false">
        <div class="content">
            <!-- logo -->
            <div class="logo">
                <!-- icon -->
                <img class="icon" src="@renderer/assets/icons.svg" />
                <!-- name -->
                <div class="info" v-show="!toolStore.collapsed">
                    <div>方块派对</div>
                    <div>BlockParty</div>
                </div>
            </div>

            <!-- 其它菜单 -->
            <div class="menuson" :class="item.isActivate ? 'select' : ''"
                v-for="(item, index) in toolStore.navigationMenu" :key="index" @click="routeTo(item.path)">
                <n-popover  v-if="toolStore.collapsed" placement="right" trigger="hover">
                    <template #trigger>
                        <i class="iconfont" :class="item.icon"></i>
                    </template>
                    <div class="large-text" @click="routeTo(item.path)">
                        {{ item.title }}
                    </div>
                </n-popover>
                <i v-else class="iconfont" :class="item.icon"></i>
                <span v-show="!toolStore.collapsed" class="title">{{ item.title }}</span>
            </div>

        </div>
    </n-layout-sider>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useToolStore } from '../store';
const toolStore = useToolStore();
const router = useRouter();
// 跳转指定路由
function routeTo(path) {
    router.push(path);
}

</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;

    /** logo */
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90px;

        // 可以拖动
        -webkit-app-region: drag;

        .icon {
            width: 45px;
            min-width: 45px;
            height: 45px;
        }

        .info {
            color: #fff;
            margin-left: 15px;
            font-size: 20px;
            font-weight: bold;
            opacity: 0;
            animation: fadeAnimation 1s forwards;
            // 设置自定义字体
            font-family: han-yi;
        }
    }

    /* 其它子菜单 */
    .menuson {
        height: 70px;
        background-color: #353d44;
        display: flex;
        align-items: center;

        .iconfont {
            margin-left: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
        }

        .title {
            flex: 1;
            text-align: center;
            margin-right: 20px;
            font-size: 22px;
            color: #fff;
            opacity: 0;
            animation: fadeAnimation 1s forwards;
        }


    }

    .select {
        background-color: #fff !important;

        .iconfont {
            color: #353d44 !important;
        }

        .title {
            color: #353d44 !important;
        }
    }

    // 渐显
    @keyframes fadeAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}
</style>